﻿@page "/Links/{Key?}"
@using global::UniversityLink.DataModels
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<LinkContext> DbFactory

<Modal Title="@("添加/更改链接组")"
       @bind-Visible="@_addModelVisible"
       OnOk="@HandleOk">
    <Form Model="@Model"
          OnFinish="OnFinish"
          @ref="@_form">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Name"/>
        </FormItem>
        <FormItem Label="描述">
            <Input @bind-Value="@context.Description"/>
        </FormItem>
        <FormItem Label="图标">
            <Select Mode="default"
                    Placeholder="Please select"
                    DataSource="@AllIcons"
                    @bind-Value="@context.Icon"
                    ItemValue="s => s.FontClass"
                    ItemLabel="s => s.Name"
                    TItemValue="string"
                    TItem="IconModel"
                    Context="model"
                    ListboxStyle="display:flex;height: 200px;flex-flow: wrap; max-width: 500px; align-content: baseline;"
                    Style="width: 100%; margin-top: 8px;">
                <LabelTemplate>
                    @model.Name
                </LabelTemplate>
                <ItemTemplate Context="m">
                    <IconFont Style="font-size: 32px" Type="@($"icon-{m.FontClass}")"/>
                </ItemTemplate>
                <DropdownRender Context="m">
                    @m
                </DropdownRender>
            </Select>
        </FormItem>
    </Form>
</Modal>

<Modal Title="@("更改图标")"
       @bind-Visible="@_iconVisible"
       OnOk="@IconHandleOk">
    <Form Model="@Link"
          OnFinish="IconOnFinish"
          @ref="@_iconForm">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Icon"/>
        </FormItem>
    </Form>
</Modal>

<Modal Title="@("添加/更改Link")"
       @bind-Visible="@_addLinkVisible"
       OnOk="@LinkHandleOk">
    <Form Model="@Link"
          OnFinish="LinkOnFinish"
          @ref="@_linkForm">
        <FormItem Label="名称">
            <Input @bind-Value="@context.Name"/>
        </FormItem>
        <FormItem Label="描述">
            <Input @bind-Value="@context.Description"/>
        </FormItem>
        <FormItem Label="链接">
            <Input @bind-Value="@context.Url"/>
        </FormItem>
        <FormItem Label="图标">
            <Flex>
                <Select Mode="default"
                        Placeholder="Please select"
                        DataSource="@AllIcons"
                        @bind-Value="@context.Icon"
                        ItemValue="s => s.FontClass"
                        ItemLabel="s => s.Name"
                        Context="model"
                        ListboxStyle="display:flex;height: 200px;flex-flow: wrap; max-width: 500px; align-content: baseline;">
                    <LabelTemplate>
                        @model.Name
                    </LabelTemplate>
                    <ItemTemplate Context="m">
                        <IconFont Style="font-size: 32px" Type="@($"icon-{m.FontClass}")"/>
                    </ItemTemplate>
                    <DropdownRender Context="m">
                        @m
                    </DropdownRender>
                </Select>
                <Button Type="@ButtonType.Primary" OnClick="@(() => context.Icon = "")">清空</Button>
            </Flex>
        </FormItem>
    </Form>
</Modal>

<Modal Title="@("更改组")"
       @bind-Visible="@_groupVisible"
       OnOk="@GroupHandleOk">
    <Select DataSource="@AllCategories"
            @bind-Value="@_model"
            ItemValue="s => s"
            ItemLabel="s => s.Name">
    </Select>
</Modal>

<Flex Align="center" Justify="space-between" Style="width: 100%">
    <div>
        <Title Level="2">@Model.Name</Title>
        <Paragraph Type="secondary">@Model.Description</Paragraph>
    </div>

    <Button Type="@ButtonType.Text" OnClick="ShowModal">
        <IconFont Style="font-size: 22px" Type="icon-bianji1"/>
    </Button>
</Flex>

<Flex Align="center" Justify="space-between" Style="width: 100%">
    <div>
        <Title Level="4">链接组</Title>
    </div>

    <Button Type="@ButtonType.Text" OnClick="() => ShowLinkModal()">
        <IconFont Style="font-size: 22px" Type="icon-tianjia"/>
    </Button>
</Flex>

<AntList DataSource="Model.Links" Style="margin: 10px">
    <ChildContent>
        <div draggable="true" @ondrop="e => OnDrop(e, context)"
             @ondragstart="e => OnDragStart(e, context)" ondragover="event.preventDefault()">
            <ListItem>
                <ChildContent>
                    <ListItemMeta>
                        <AvatarTemplate>
                            <div style="text-align: center">
                                @if (!string.IsNullOrEmpty(context.Icon))
                                {
                                    if (context.Icon.StartsWith("http"))
                                    {
                                        <img alt="" src="@context.Icon" style="height: 42px;width: 42px;border-radius: 4px"/>
                                    }
                                    else
                                    {
                                        <IconFont Style="font-size: 42px" Type="@($"icon-{context.Icon}")"/>
                                    }
                                }
                                else
                                {
                                    <img alt="" src="@GetIcon(context.Url)" style="height: 42px;width: 42px;border-radius: 4px"/>
                                }
                            </div>
                        </AvatarTemplate>
                        <TitleTemplate>
                            <h3>@context.Name</h3>
                            <a href="@context.Url" target="_blank">@context.Url</a>
                        </TitleTemplate>
                        <DescriptionTemplate>
                            <p>@context.Description</p>
                        </DescriptionTemplate>
                    </ListItemMeta>
                </ChildContent>
                <Extra>
                    <Space>
                        <SpaceItem>
                            <Button type="@ButtonType.Link" OnClick="@(() => ShowIconModal(context))">更改图片Url</Button>
                        </SpaceItem>
                        <SpaceItem>
                            <Button type="@ButtonType.Link" OnClick="@(() => ShowGroupModal(context))">更改组</Button>
                        </SpaceItem>
                        <SpaceItem>
                            <Button type="@ButtonType.Link" OnClick="@(() => ShowLinkModal(context))">更改</Button>
                        </SpaceItem>
                        <SpaceItem>
                            <Button type="@ButtonType.Text" Danger OnClick="@(() => Remove(context))">删除</Button>
                        </SpaceItem>
                    </Space>
                </Extra>
            </ListItem>
        </div>
    </ChildContent>
</AntList>

@if (!string.IsNullOrEmpty(Key) && Model.Links.Count == 0)
{
    <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
           Style="padding: 20px" Description="@("当前还未添加任何链接")">
        <ChildContent>
            <Button type="@ButtonType.Primary" OnClick="@(() => ShowLinkModal())">添加一个</Button>
        </ChildContent>
    </Empty>
}